// gulp 的入口文件
// exports.foo = deno =>{
//   console.log("foo task working...");
//   deno()//表示任务结束
// }
// const {series,parallel} = require("gulp")

// const task1 = done =>{
//   setTimeout(()=>{
//     console.log("task1 ...");
//     done()
//   },1000)
// }
// const task2 = done =>{
//   setTimeout(()=>{
//     console.log("task2 ...");
//     done()
//   },1000)
// }
// const task3 = done =>{
//   setTimeout(()=>{
//     console.log("task3 ...");
//     done()
//   },1000)
// }

// exports.foo = series(task1,task2,task3)

// exports.bar = parallel(task1,task2,task3)

// exports.promise = ()=>{
//   console.log("promise...");
//   // return Promise.resolve() //成功
//   return Promise.reject(new Error("promise err")) //失败
// }

// exports.async = async () =>{
//   await new Promise(resolve=>{
//     setTimeout(resolve,1000)
//   })
//   console.log("async task ...");
// }


// 写入temp.text文件
// const fs = require("fs")

// exports.stream = ()=>{
//   const read= fs.createReadStream("package.json")
//   const write = fs.createWriteStream("temp.ext")
//   read.pipe(write)
//   return read
// }


// 工作原理
//  const fs = require("fs");
//  const {Transform} =require("stream")

//  exports.default = ()=>{
//    const read = fs.createReadStream("package.json")
//    const write = fs.createWriteStream("package.json.js")

//    const tranform = new Transform({
//      transform:(chunk,endoding, callback)=>{
//        const input = chunk.toString();
//        const output = input.replace(/\s+/g,'').replace(/\/\*.+?\*\//g,'')
//        callback(null,output)
//      }
//    })
//    read
//    .pipe(tranform)
//    .pipe(write)
//    return read
//  }

// ######################################################################################################
//gulp 文件操作api

// css 添加样式插件  yarn add gulp-clean-css  --dev
// 重命名 yarn add gulp-rename --dev
// js 部分: yarn add gulp-babel --dev
//          yarn add @babel/core @babel/preset-env --dev  
// html: yarn add gulp-swig --dev
// image: yarn add gulp-imagemin --dev 
// 清除文件: yarn add del --dev

// 自动加载插件: yarn add gulp-load-plugins --dev

// 热更新 yarn add browser-sync --dev
// 最后一步文件依赖: yarn add gulp-useref --dev
//  压缩文件 :  yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
//  判断是哪种文件: yarn add gulp-if --dev

// const {src,dest,parallel,series } = require("gulp")
// const cleanCss= require("gulp-clean-css")
// const rename = require("gulp-rename")
// const babel = require("gulp-babel")
// const swig = require("gulp-swig")
// const imagemin= require("gulp-imagemin")
// const del = require("del")



const {src,dest,parallel,series,watch } = require("gulp")

const loadPlugins = require("gulp-load-plugins")
const plugins = loadPlugins()

// const plugins.rename = require("gulp-rename")
// const plugins.babel = require("gulp-babel")
// const plugins.swig = require("gulp-swig")
// const plugins.imagemin= require("gulp-imagemin")
const del = require("del")

// 热更新
const browserSync = require("browser-sync")
const bs= browserSync.create();






// const data = [
//   menu:[],
//   pkg:require('./package.json')
//   date:new Date()
// ]

const clean = ()=>{
  return del(['dist','temp'])
}

const css = ()=>{
  return src('src/*.css')
        .pipe(plugins.cleanCss())
        // .pipe(plugins.rename({extname:'.min.css'}))
        .pipe(dest("temp"))
        .pipe(bs.reload({stream:true}))
}
// js
const js = ()=>{
  return src('src/*.js',{base:'src'})
        .pipe(plugins.babel({presets:['@babel/preset-env']}))
        .pipe(dest('temp'))
        .pipe(bs.reload({stream:true}))
}

// page
const page = ()=>{
  return src("src/*.html",{base:'src'})
        // .pipe(plugins.swig())
        .pipe(dest('temp'))
        .pipe(bs.reload({stream:true}))
}
// iamge
const image = ()=>{
  return src("src/image/*.png",{base:'src'})
        .pipe(plugins.imagemin())
        .pipe(dest("dist"))
}
// 其他
const extra = () =>{
  return src("public/**",{base:'public'})
          .pipe(dest("dist"))
}

const serve = () =>{
  // watch 监听文件变化
  watch('src/*.css',css)
  watch('src/*.js',js)
  watch('src/*.html',page)
  watch([
    'src/image/*.png',
    'public/**',
  ],bs.reload)
  // watch('src/image/*.png',image)
  // watch('public/**',extra)


  bs.init({
    notify:false,
    port:2080,
    // open:true,
    // files:"dist/**",
    server:{
      baseDir:["temp","src","public"],
      routes:{
        "./node_modules":"node_modules"
      }
    }
  })
}



const useref = ()=>{
  return src("temp/*.html")
          .pipe(plugins.useref({searchPath:['dist','.'] }))
          // html js css
          .pipe(plugins.if(/\.js$/,plugins.uglify()))
          .pipe(plugins.if(/\.css$/,plugins.cleanCss()))
          .pipe(plugins.if(/\.html$/,plugins.htmlmin({
            collapseWhitespace:true,
            minfyCSS:true,
            minfyJS:true
          })))
          .pipe(dest('dist'))
}

// const compile = parallel(js,image,page,css)
const compile = parallel(js,page,css)

// 打包之前
const build = series(clean,parallel(series(compile,useref),image,extra))

const develop = series(compile,serve)



module.exports={
  clean,
  build,
  develop,
  // useref,
  // compile
  // imgae
  // css,
  // js,
  // page
}


